<template>
  <div>
    <div class="emissionSourceDictionary">
      <!-- 标题 -->
      <div class="emissionSourceDictionary-title">产品排放源</div>


      <div class="emissionSourceDictionary-condition-btn">
        <el-button @click="add">新增</el-button>
        <el-button @click="dao">导入</el-button>
      </div>


      <!-- 表格-核算报告 -->
      <div class="emissionSourceDictionary-report">
        <normal-table
          ref="table"
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>

      <!-- 添加排放源 -->
      <el-dialog
        title="添加排放源"
        :visible.sync="showWindow"
        width="60%"
        class="form">
        <!-- form表单 -->
        <div class="formData">
          <normal-form
            :formModel="addFormModel"
            :config="addConfig"/>
        </div>
        <el-button @click="turn">选择排放因子</el-button>
        <span slot="footer" class="form-footer">
          <el-button type="primary" @click="createEmissionSource()" class="confirm">确 定</el-button>
          <el-button @click="showWindow = false">取 消</el-button>
          </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'
import NormalForm from '@/components/NormalForm'

export default {
  name: 'emissionSourceDictionary',
  components: {
    NormalTable,
    NormalFormPlus,
    NormalForm
  },
  mounted() {
    if (this.$route.query.select) {
      // 选择排放源
      this.daoType = this.$route.query.type
      this.operationConfig.select = true
      this.daoModel.processId = this.$route.query.processId
      this.daoModel.name = this.$route.query.name

    }
    this.initTableData()
    if (JSON.parse(window.sessionStorage.getItem("form"))) {
      this.addFormModel = JSON.parse(window.sessionStorage.getItem("form"))
      this.showWindow = true
      console.log(this.addFormModel)
      window.sessionStorage.removeItem("form")
    }

  },
  data() {
    return {
      daoType: 1,
      daoModel: {
        processId: "",
        name: "",
      },
      showWindow: false,
      addFormModel: {
        name: "", //	排放源名称
        type: "", //		类型
        matchType: "", //		匹配类型
        note: "", //		排放源说明
        factor: "", //		因子名
        factorEmissions: "", //		排放因子值
        emissionsUnitN: "", //		排放单位分子
        emissionsUnitD: "", //		排放单位分母
        dataSource: "", //		数据来源
      },
      addConfig: [
        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '排放源名称',
          edit: true,
          props: {
            placeholder: '排放源名称',
          }
        },
        {
          id: '2',
          type: 'select',
          model: 'type',
          name: '排放源类型',
          edit: true,
          props: {
            placeholder: '排放源类型',
            options: [
              {label: '原材料/物料', value: '原材料/物料'},
              {label: '耗材', value: '耗材'},
              {label: '能源', value: '能源'},
              {label: '运输/通勤', value: '运输/通勤'},
              {label: '固碳', value: '固碳'},
              {label: '废气', value: '废气'},
              {label: '废水', value: '废水'},
              {label: '固废', value: '固废'},
              {label: '危险废物', value: '危险废物'},
            ]
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'matchType',
          name: '匹配类型',
          edit: true,
          props: {
            placeholder: '匹配类型',
            options: [
              {label: '排放因子', value: '排放因子'},
              {label: '检测值', value: '检测值'},
            ]
          }
        },
        {
          id: '4',
          type: 'text',
          model: 'note',
          name: '排放源说明',
          edit: true,
          props: {
            placeholder: '排放源说明',
          }
        },
        {
          id: '5',
          type: 'input',
          model: 'factor',
          name: '因子名',
          edit: true,
          props: {
            placeholder: '因子名',
          }
        },
        {
          id: '6',
          type: 'input',
          model: 'factorEmissions',
          name: '排放因子值',
          edit: true,
          props: {
            placeholder: '排放因子值',
          }
        },
        {
          id: '7',
          type: 'select',
          model: 'emissionsUnitN',
          name: '排放单位分子',
          edit: true,
          props: {
            placeholder: '排放单位分子',
            options: [
              {label: 't CO2-eq', value: 't CO2-eq'},
              {label: 'kg CO2-eq', value: 'kg CO2-eq'},
            ]
          }
        },
        {
          id: '8',
          type: 'select',
          model: 'emissionsUnitD',
          name: '排放单位分母',
          edit: true,
          props: {
            placeholder: '排放单位分母',
            options: [
              {label: 'kg', value: 'kg'},
              {label: 't', value: 't'},
            ]
          }
        },
        {
          id: '9',
          type: 'input',
          model: 'dataSource',
          name: '数据来源',
          edit: true,
          props: {
            placeholder: '数据来源',
          }
        },
      ],
      formModel: {
        name: null,// 排放源名称
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '2',
              edit: true,
              type: 'input',
              span: 4,
              model: 'name',
              name: '',
              props: {
                placeholder: "排放源名称",
                width: 150
              }
            },
          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "排放源名称",
        },
        {
          prop: "type",
          label: "类型",
        },
        {
          prop: "factor",
          label: "因子名",
        },
        {
          prop: "factorEmissions",
          label: "排放因子值",
        },
        {
          prop: "emissionsUnitN",
          label: "排放单位",
        },
        {
          prop: "@createTime",
          label: "创建时间",
        },
      ],

    }
  },
  methods: {
    turn() {
      // 跳转页面前存储一下页面数据
      console.log("before turn")
      console.log(this.addFormModel)
      window.sessionStorage.setItem("form", JSON.stringify(this.addFormModel))
      this.$router.push({
        path: "/enterpriseCarbonAccounting/carbonEmissionManage/emissionSourceFactor",
        query: {cabon: true}
      })
    },
    // 创建排放源
    createEmissionSource() {
      this.showWindow = false
      this.$API.product.createEmission({
        ...this.addFormModel,
      }).then(response => {
        this.$message({
          type: 'success',
          message: '添加成功'
        });
        this.initTableData()
      })
    },

    add() {
      this.showWindow = true;

      this.addFormModel = {
        name: "", //	排放源名称
        type: "", //		类型
        matchType: "", //		匹配类型
        note: "", //		排放源说明
        factor: "", //		因子名
        factorEmissions: "", //		排放因子值
        emissionsUnitN: "", //		排放单位分子
        emissionsUnitD: "", //		排放单位分母
        dataSource: "", //		数据来源
      }
    },
    dao() {
      if (this.daoType == 1) {
        var li = this.getSelection()
        console.log(li)
        if (li) {
          this.$router.push(
            {
              path: "/carbonFootprintVerification/processManagement/addProcessManagement",
              query: {
                select: true,
                processId: this.daoModel.processId,
                name: this.daoModel.name,
                emissionId: li[0].id
              }
            })
        }
      } else {

      }

    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {

      }
    },
    // 分页点击事件
    changePage() {
      this.initTableData()
    },
    // 获取选中的表单
    getSelection() {
      return this.$refs.table.getSelection()
    },
    //初始化表格
    initTableData() {
      if (this.$MOCK.mock) {
        this.tableData = this.$MOCK.product.emissionList.data.list
        this.paginationConfig.total = this.$MOCK.product.emissionList.data.total
        return
      }
      this.$API.product.getEmissionByPage({
        ...this.formModel,
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
      }).then(response => {
        this.tableData = response.data.list
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i]['emissionsUnitN'] = this.tableData[i]['emissionsUnitN'] + '/' + this.tableData[i]['emissionsUnitD']
        }
        this.paginationConfig.total = response.data.total
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emissionSourceDictionary {

  height: 1680px;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .emissionSourceDictionary-title {
    font-size: 16px;
    font-weight: bold;
  }

  .emissionSourceDictionary-condition {
    display: flex;

    .emissionSourceDictionary-condition-form {
      flex: 3;
    }

    .emissionSourceDictionary-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .emissionSourceDictionary-report {
    .emissionSourceDictionary-history-title {
      font-size: 14px;
    }
  }
}
</style>
